<template>
  <div class="statistics-card">
    <el-row
      type="flex"
      :gutter="20"
      style="flex-wrap: wrap;"
    >
      <el-col
        v-for="(item, index) in list"
        :key="index"
        :xs="12"
        :sm="8"
        :md="8"
        :lg="4"
        style="margin-top: 20px; flex-grow: 1;"
        @click.native="handleClick(item)"
      >
        <div class="statistics-card__item">
          <svg-icon
            :icon-class="item.icon"
            class="icon"
          />
          <div class="data">
            <ValueAndUnit
              v-if="!loading"
              v-model="item.value"
              :unit="item.unit"
            />

            <div v-else>
              <i class="el-icon-loading" style="color: #409EFF; font-size: 16px;" />
            </div>

            <div class="data__label">{{ item.label }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ValueAndUnit from '@/components/ValueAndUnit/index.vue'

export default {
  name: '',
  components: { ValueAndUnit },
  props: {
    list: {
      type: Array,
      default: () => []
    },

    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleClick(item) {
      this.$emit('onClick', item)
    }
  }
}
</script>
<style lang="scss" scoped>
.statistics-card {
  &__item {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;

    .icon {
      width: 48px;
      height: 48px;
    }

    .data {
      margin-left: 12px;

      &__label {
        font-size: 14px;
        color: rgba(0,0,0,0.9);
      }
    }
  }
}
</style>
